import React, { useState, useMemo } from 'react';

function Example() {
    const [jiajia, setJiajia] = useState("他名字叫嘉佳");
    const [yuanyuan, setYuanyuan] = useState("他名字叫源园");

    return (
        <>
            <button onClick={() => setJiajia(new Date().getTime())}>嘉佳</button>
            <button onClick={() => setYuanyuan(new Date().getTime() + ',源园今年4岁')} style={{ marginLeft: `10px` }}>源园</button>
            <ChildComponent name={jiajia}>
                {yuanyuan}
            </ChildComponent>
        </>
    )
}

function ChildComponent({ name, children }) {
    function changeJiajia(name) {
        console.log("嘉佳又惹妈妈生气了！");
        return name + ',嘉佳今年7岁'
    }

    const actionJiajia = useMemo(() => changeJiajia(name), [name]);
    return (
        <>
            <div>{actionJiajia}</div>
            <div>{children}</div>
        </>
    )
}





export default Example